<template>
  <div>
    <el-dialog title="添加场景" :visible.sync="scenevisible">
      <el-form :model="scene">
        <el-form-item label="一级场景名称" :label-width="formLabelWidth" style="width: 500px">
          <el-input v-model="scene.scenarioTitle" autocomplete="off" placeholder="请输入一级场景字段"></el-input>
        </el-form-item>

        <el-form-item label="二级场景名称" :label-width="formLabelWidth" style="width: 500px">
          <el-input v-model="sceneChild.scenarioTitle" autocomplete="off" placeholder="请输入二级场景字段"></el-input>
        </el-form-item>

        <el-upload
            class="avatar-uploader"
            action="http://localhost:9527/scene/upload"
            name="sceneImg"
            :show-file-list="false"
            ref="upload"
            :on-change="handleChange"
            :before-upload="beforeAvatarUpload"
            :auto-upload="false">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon">点击上传场景图</i>
        </el-upload>
        <el-button style="margin-left: 38.5%;" size="small" type="success" @click="addItem"
                   v-if="sceneChild.scenarioTitle.length!=0">添加
        </el-button>
        <el-button style="margin-left: 38.5%;" size="small" type="info" @click="alertWarning"
                   v-if="sceneChild.scenarioTitle.length==0">添加
        </el-button>
        <div class="sceneChildList" v-if="scene.sceneChildList.length!=0">
          <el-row>
            <el-col :span="8" v-for="(item,i) in scene.sceneChildList">
              <el-card :body-style="{ padding: '0px' }" class="scene-child-item">
                <img :src="item.url" class="image">
                <div>
                  <p style="text-align: center">{{ item.scenarioTitle }}</p>
                  <div class="bottom clearfix">
                    <center>
                      <el-button type="text" class="button" style="color: red;font-size: 12px"
                                 @click="delSceneChild(i)">
                        删除
                      </el-button>
                    </center>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>

        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="scenevisible = false">取 消</el-button>
        <el-button type="primary" @click="suhmitForm">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="查看场景" :visible.sync="sceneInfoVisible">
      <el-table
          :data="viewList"
          style="width: 100%">
        <el-table-column
            prop="scenarioTitle"
            label="场景标题"
            width="180">
        </el-table-column>
        <el-table-column
            label="场景图片"
            width="180">
          <template slot-scope="s">
            <el-image
                style="width: 100px; height: 100px"
                :src="s.row.url"
                fit="contain"></el-image>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="sceneInfoVisible = false">好 了</el-button>
      </div>
    </el-dialog>
    <el-dialog title="编辑场景" :visible.sync="sceneUpdateVisible" :showClose="false">
      <el-form :model="updateScene">
        <el-form-item label="一级场景名称" :label-width="formLabelWidth" style="width: 500px">
          <el-input v-model="updateScene.scenarioTitle" autocomplete="off" placeholder="请输入一级场景字段"></el-input>
        </el-form-item>
        <p style="text-align: center">二级字段及图片</p>
        <div class="sceneChildList">
          <el-row>
            <el-col :span="8" v-for="(item,i) in updateScene.sceneChildList">
              <el-card :body-style="{ padding: '0px' }" class="scene-child-item-update">
<!--                <img :src="item.url" class="image">-->
                <el-upload
                    class="uploader-update"
                    name="files"
                    action="http://localhost:9527/scene/upload"
                    :on-success="(response,file,fileList)=> { return uploadSuccess(response, file, fileList,item,i)}"
                    :show-file-list="false"
                    :auto-upload="true"
                    :on-change="(file,fileList)=> { return updateImgChange(file,fileList,item)}"
                    >
                  <img v-if="item.url" :src="item.url" class="sceneImg" :ref="'img'+i">
                  <i v-else class="el-icon-plus avatar-uploader-icon" style="width: 100px;height: 100px;line-height: 100px"></i>
                </el-upload>
                <div>
                  <el-input
                      size="mini"
                      v-model="item.scenarioTitle">
                  </el-input>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
        <center>
          <el-button type="primary" plain @click="addSceneChildInit">添加二级场景</el-button>
        </center>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeUpdate">取 消</el-button>
        <el-button type="primary" @click="submitUpdateForm">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="添加二级场景" :visible.sync="addSceneChildVisible" :showClose="false">
      <el-form :model="sceneChild">
        <el-input placeholder="请输入二级场景名称" v-model="sceneChild.scenarioTitle" style="width: 340px;margin-left: 25%">
          <template slot="prepend">二级场景名称</template>
        </el-input>
        <br>
        <el-upload
            class="avatar-uploader"
            action="http://localhost:9527/scene/upload"
            name="files"
            :show-file-list="false"
            ref="upload"
            :auto-upload="true"
            :on-change="sceneChildImgChange"
            :on-success="sceneChildImgSuccess"
            style="margin-top: 20px">
          <img v-if="sceneChild.url" :src="sceneChild.url" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon">点击上传场景图</i>
        </el-upload>
          <el-form-item label="请选择一级场景" style="margin-left: 25%">
            <el-select v-model="sceneChild.pId" placeholder="请选择一级场景">
              <el-option
                  v-for="item in sceneList"
                  :key="item.id"
                  :label="item.scenarioTitle"
                  :value="item.id">
                {{item.scenarioTitle}}
              </el-option>
            </el-select>
          </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addSceneChildVisible=false">取 消</el-button>
        <el-button type="primary" @click="addSceneChild">添 加</el-button>
      </div>
    </el-dialog>
    <div class="box_table">
      <el-breadcrumb separator-class="el-icon-arrow-right" style="position:fixed;top: 13%">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商城管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>场景管理</el-breadcrumb-item>
      </el-breadcrumb>
      <el-button type="primary" plain size="medium" @click="addinit()"
                 style="float: right;margin-bottom: 10px;margin-top: 10px">添加一级场景字段
      </el-button>
      <el-table
          :data="list"
          border
          style="width: 100%;"
      >
        <el-table-column
            prop="scenarioNumber"
            label="编号"
            width="180">
        </el-table-column>
        <el-table-column
            prop="scenarioTitle"
            label="一级场景名称"
            width="180">
        </el-table-column>
        <el-table-column
            label="二级场景名称"
            width="200">
          <template slot-scope="s">
            <el-tag v-for="(item,index) in s.row.sceneChildList" v-if="index <=1">{{ item.scenarioTitle }}</el-tag>
            <span v-if="s.row.sceneChildList.length>2">....</span>
          </template>
        </el-table-column>
        <el-table-column
            label="是否显示"
            width="180">
          <template slot-scope="s">
            <el-switch @change="updateStatus(s.row.id,s.row.status)"
                       v-model="s.row.status">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
            prop="createTime"
            label="添加时间"
            width="180"
        >
        </el-table-column>
        <el-table-column
            label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="primary" plain icon="el-icon-chat-dot-round" circle size="small"
                       @click="view(scope.row)"></el-button>
            <el-button type="primary" plain icon="el-icon-edit" circle size="small"
                       @click="updateinit(scope.row)"></el-button>
            <el-button type="danger" plain icon="el-icon-delete" circle size="small"
                       @click="delScene(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sceneList: null,
      scenevisible: false,
      sceneInfoVisible: false,
      sceneUpdateVisible:false,
      formLabelWidth: '120px',
      imageUrl: "",
      sceneChild: {
        scenarioTitle: "",
        url: "",
        pId:0
      },
      scene: {
        scenarioTitle: "",
        sceneChildList: []
      },
      updateScene:{},
      fileList: [],
      viewList: null,
      addSceneChildVisible:false,
      page:1,
      list: null
    }
  },
  methods: {
    loadData() {
      this.$axios({
        method: "get",
        url: "scene/getAllScene",
      }).then(res => {
        this.list = res.data.data
      })
    },
    handleCurrentChange(val) {
      this.page = val
      this.loadData()
    },
    addSceneChildInit() {
      this.sceneUpdateVisible = false
      this.sceneChild.scenarioTitle = ""
      this.sceneChild.url = ""
      this.sceneChild.pId = 0
      this.addSceneChildVisible = true
    },
    addSceneChild(){
      this.$axios({
        method:"post",
        url:"scene/addSceneChild",
        data:this.sceneChild
      }).then(res=>{
        if (res.data.code == 200) {
          this.addSceneChildVisible = false
          this.loadData()
          this.$message({
            type: 'success',
            message: '添加成功!'
          });
        }
      })
    },
    sceneChildImgSuccess(res,file,fileList){
      this.$nextTick( () => {
        this.sceneChild.url = res.data[0]
      })
    },
    sceneChildImgChange(file, fileList){
      this.sceneChild.url = URL.createObjectURL(file.raw)
    },
    closeUpdate(){
      this.loadData()
      this.sceneUpdateVisible = false

    },

    updateinit(data){
      this.sceneUpdateVisible = true
      this.updateScene = data
    },

    view(data) {
      this.sceneInfoVisible = true
      this.viewList = data.sceneChildList
    },

    delScene(id) {
      this.$confirm('确定要删除该场景', {
        confirmButtonText: '确定',
        cancelButtonText: '再想想',
        type: 'warning'
      }).then(() => {
        this.$axios({
          method: "get",
          url: "scene/delSceneById",
          params: {
            id: id
          }
        }).then(res => {
          if (res.data.code == 200) {
            this.sceneInfoVisible = false
            this.loadData()
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    addinit() {
      this.scene.scenarioTitle = ""
      this.scene.sceneChildList = []
      this.scenevisible = true
    },

    suhmitForm() {
      let formData = new FormData();
      this.fileList.forEach(item => {
        formData.append("files", item.raw);
      });
      this.$axios({
        method: "post",
        url: "scene/upload",
        data: formData,
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(res => {
            if (res.data.code == 200) {
              for (let i = 0; i < this.scene.sceneChildList.length; i++) {
                this.scene.sceneChildList[i].url = res.data.data[i]
              }
              this.$axios({
                method: "post",
                url: "scene/addSceneInfo",
                data: this.scene
              }).then(res => {
                if (res.data.code == 200) {
                  this.$message({
                    type: 'success',
                    message: '创建场景成功!'
                  });
                  this.scenevisible = false
                  this.loadData()
                }
              })
            }
          }
      )
    },

    addItem() {
      if (this.imageUrl.length != 0) {
        this.sceneChild.url = this.imageUrl
        this.imageUrl = ""
        if (this.scene.sceneChildList.length < 6) {
          this.scene.sceneChildList.push(this.sceneChild)
          this.sceneChild = {scenarioTitle: "", url: ""}
        } else {
          this.sceneChild = {scenarioTitle: "", url: ""}
          alert("最多添加6个")
          return
        }
      } else {
        alert("请选择图片")
      }
    },

    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },

    handleChange(file, fileList) {
      this.imageUrl = URL.createObjectURL(file.raw);
      // this.upFile.append("file",fileList)
      this.fileList = fileList
    },

    alertWarning() {
      alert("请输入二级场景名称")
    },

    delSceneChild(index) {
      this.scene.sceneChildList.splice(index, 1)
      this.fileList.splice(index, 1)
    },

    updateStatus(id, status) {
      this.$axios({
        method: "get",
        url: "scene/updateSceneStatus",
        params: {
          id: id,
          status: status
        }
      }).then(res => {
        if (res.data.code == 200) {
          this.$message({
            type: 'success',
            message: '状态已修改!'
          });
        }
      })
    },

    updateImgChange(file,fileList,item) {
        item.url = URL.createObjectURL(file.raw);
    },
    uploadSuccess(res,file,fileList,item,index) {
      this.$nextTick( () => {
        this.updateScene.sceneChildList[index].url = res.data[0]
      })

    },
    submitUpdateForm(){
      this.$axios({
        method:"post",
        url:"scene/updateScene",
        data:this.updateScene
      }).then(res=>{
        if (res.data.code==200){
          this.sceneUpdateVisible = false
          this.loadData()
          this.$message({
            type: 'success',
            message: '修改成功!'
          });
        }
      })
    }
  },
  created() {
    this.loadData()
  }
}
</script>

<style>
.box_table {
  width: 86.5%;
  margin: 0 auto;
}

.avatar-uploader .el-upload {
  border: 3px dashed #d9d9d9;
  border-radius: 15px;
  cursor: pointer;
  position: relative;
  left: 33%;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 5px;
  color: #8c939d;
  width: 128px;
  height: 128px;
  line-height: 128px;
  text-align: center;
}

.avatar {
  width: 128px;
  height: 128px;
  display: block;
}

.sceneChildList {
  width: 50%;
  height: 50%;
  border: 1px solid #000000;
  margin: 0 auto;
}

.scene-child-item {
  width: 100px;
  height: 150px;
}
.scene-child-item-update{
  width: 100px;
  height: 140px;
}

.image {
  width: 100px;
  height: 100px;
}
.uploader-update{
  border: 1px solid #d9d9d9;
  /*border-radius: 15px;*/
  cursor: pointer;
  position: relative;
  overflow: hidden;

}
.sceneImg{
  width: 108px;
  height: 108px;
}
</style>
